import React, { Component } from 'react'
import DataCategory from '../../types/DataCategory'
import { Space, Button, Select, message } from 'antd'
import { queryCategoryOptions } from '../../requests/DataCategory'
import { getRes } from '../../configFile'
import ButtonGroup from 'antd/lib/button/button-group'
const { Option } = Select;

/**
 * 该组件接收一个SELECT类型的DataCategory
 */
interface IProps {
    propCate: DataCategory
    onChange?: (value: string) => void
    deleteExistedCate: (cateID: number) => void
    abortModify: (cateID: number) => void
}
interface IState {
    options: string[]
}
export default class SELECTtoModify extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            options: []
        }
    }
    async componentDidMount() {
        try {
            const res = getRes(await queryCategoryOptions(this.props.propCate.dataCategoryID))
            if (res.isSuccessful === false) {
                message.error(res.message)
                return;
            }
            this.setState({
                options: res.data
            })
        } catch (err) {
            message.error(err.toString())
        }
    }

    //使外部Form.Item能够拿到数据
    triggerChange = (changedValue: string) => {
        if (this.props.onChange) {
            this.props.onChange(changedValue);
        }
    };
    handleSelectDataChange = (value: string) => {
        this.triggerChange(value)
    };

    render() {
        return (
            <Space>
                <Select style={{ width: 400 }} onChange={this.handleSelectDataChange}>
                    {this.state.options.map(item => (
                        <Option key={item} value={item}>{item}</Option>
                    ))}
                </Select>
                <ButtonGroup>
                    <Button danger onClick={this.props.deleteExistedCate.bind(this, this.props.propCate.dataCategoryID)}>删除类型</Button>
                    <Button onClick={this.props.abortModify.bind(this, this.props.propCate.dataCategoryID)}>放弃修改</Button>
                </ButtonGroup>
            </Space>
        )
    }
}
